<script setup lang="tsx">
import { onMounted, ref } from "vue";
import { Iconify, Icon } from '@iconify/vue'
import { getIconData, listIcons } from '@iconify/utils'

const collections = ref<Array<{prefix: string, name: string}>>([])
const selectedCollection = ref<string>('')
const iconsInCollection = ref<string[]>([])

onMounted(() => {
  try {
    // Get all available icon collections from Iconify
    // Since we can't directly list collections in browser, we'll provide some common ones
    // These are just examples - you can add any collections you need
    collections.value = [
      { prefix: 'ph', name: 'Phosphor Icons' },
      { prefix: 'line-md', name: 'Line Material Design' },
      { prefix: 'tdesign', name: 'TDesign Icons' },
      { prefix: 'mdi', name: 'Material Design Icons' },
      { prefix: 'lucide', name: 'Lucide Icons' },
      { prefix: 'carbon', name: 'Carbon Icons' },
      { prefix: 'ri', name: 'Remix Icons' },
      { prefix: 'ant-design', name: 'Ant Design Icons' },
      { prefix: 'ion', name: 'Ionicons' },
      { prefix: 'ep', name: 'Element Plus Icons' }
    ]
    
    console.log('Available icon collections:', collections.value)

    
  } catch (error) {
    console.error('Error loading icon collections:', error)
  }
})

// Function to load icons in a selected collection
const loadIconsInCollection = (prefix: string) => {
  selectedCollection.value = prefix
  
  try {
    // This is a simplified approach - in a real app, you might want to load icons differently
    // For this demo, we'll just provide some common icons for each collection
    const commonIconsByCollection: Record<string, string[]> = {
      'ph': ['article', 'home', 'settings', 'user', 'search', 'menu', 'x', 'plus', 'trash', 'edit'],
      'line-md': ['home', 'settings', 'user', 'search', 'menu', 'close', 'plus', 'trash', 'edit', 'dashboard'],
      'tdesign': ['file-icon', 'home', 'settings', 'user', 'search', 'menu', 'close', 'plus', 'trash', 'edit'],
      'mdi': ['home', 'settings', 'user', 'search', 'menu', 'close', 'plus', 'trash-can', 'pencil', 'dashboard']
    }
    
    iconsInCollection.value = commonIconsByCollection[prefix] || []
    console.log(`Icons in ${prefix}:`, iconsInCollection.value)
  } catch (error) {
    console.error(`Error loading icons for collection ${prefix}:`, error)
    iconsInCollection.value = []
  }
}
</script>
<template>
  <div class="p-4">
    <h2 class="text-xl font-bold mb-4">Icon Collections</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div 
        v-for="item in collections" 
        :key="item.prefix" 
        class="border p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
        @click="loadIconsInCollection(item.prefix)"
      >
        <div class="flex items-center gap-2">
          <Icon v-if="selectedCollection === item.prefix" icon="ph:check" class="text-green-500" />
          <div class="font-medium">{{ item.prefix }}</div>
        </div>
        <div class="text-sm text-gray-600">{{ item.name }}</div>
      </div>
    </div>
    
    <div v-if="selectedCollection" class="mt-8">
      <h3 class="text-lg font-semibold mb-3">Icons in {{ selectedCollection }}</h3>
      <div class="flex flex-wrap gap-3">
        <div v-for="icon in iconsInCollection" :key="icon" class="flex flex-col items-center gap-1 p-2 border rounded">
          <Icon :icon="`${selectedCollection}:${icon}`" class="text-gray-700" />
          <span class="text-xs text-gray-500">{{ icon }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped></style>